<template>
    <div class="container">
        <el-scrollbar>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" :default-active="route.path" text-color="#fff"
                router unique-opened :collapse="isCollapse" class="new-el-menu--sidebar">
                <!-- 首页部分 -->
                <el-menu-item v-for="item in leftMenu.slice(0, 1)" :key="item.name" index="/index/dashboard">
                    <el-icon><i :class="'iconfont ' + item.meta.icon"></i></el-icon>
                    <span>{{ $t(item.meta.title) }}</span>
                </el-menu-item>
                <!-- 首页外其他部分 -->
                <el-sub-menu v-for="items in leftMenu.slice(1, leftMenu.length)" :key="items.name" :index="items.path">
                    <template #title>
                        <el-icon><i :class="'iconfont ' + items.meta.icon"></i></el-icon>
                        <span>{{ $t(items.meta.title) }}</span>
                    </template>
                    <!-- 第三级路由部分 -->
                    <template v-for="data in items.children" :key="data.name">
                        <el-menu-item v-if="!data.meta.hidden" :index="'/index/' + items.path + '/' + data.path">
                            <template #title>
                                <span>{{ $t(data.meta.title) }}</span>
                            </template>
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </div>
</template>
<script setup lang="ts">
import { getLeftMenu } from "../../router/page";
import { useRoute, useRouter } from "vue-router"


const leftMenu = getLeftMenu()
const route = useRoute()
const router = useRouter()
defineProps({
    isCollapse: Boolean
})
</script>

<style scoped lang="less">
.el-scrollbar {
    height: 100%;
    background: #545c64;
}

.container {
    height: 100%;
}

.el-menu {
    border: 0;
}

.new-el-menu--sidebar:not(.el-menu--collapse) {
    width: 200px;
}
</style>